<template>
  <h2>当前求和：{{ sum }}</h2>
  <button @click="sum++">点我+1</button>
  <hr />
  <h2>当前信息为：{{ msg }}</h2>
  <button @click="msg += '!'">修改信息</button>
  <hr />
  <h2>姓名：{{ persons.name }}</h2>
  <h2>年龄：{{ persons.age }}</h2>
  <h2>薪资：{{ persons.job.j1.salary }}K</h2>
  <button @click="persons.name += '-'">修改姓名</button>
  <button @click="persons.age++">增长年龄</button>
  <button @click="persons.job.j1.salary++">增长薪资</button>
</template>
  
<script lang="js">
import { ref,reactive, computed,watch} from 'vue'
export default {
    name: 'App',
    setup() {
        let sum = ref(0)
        let msg = ref('你好啊')
        let persons = reactive({
            name:'张三',
            age:19,
            job:{
                j1:{
                    salary:20
                }
            }
        })
        // 监视
        // 情况一：监视ref定义的一个响应式数据
        watch(sum,(newValue,oldValue)=>{
            console.log('sum值改变了',newValue,oldValue);
        },{immediate:true})
       
        // 情况二：监视ref定义的多个响应式数据
        watch([sum,msg],(newValue,oldValue)=>{
            console.log('sum值改变了',newValue,oldValue);
        },{immediate:true})

        /* 
        情况三：监视reactive定义的一个响应式数据的全部属性
            1.注意：此处无法正确的获得oldValue
            2.注意：强制开启了深度监听（deep配置无效）
        */
        watch(persons,(newValue,oldValue)=>{
            console.log('persons值改变了',newValue,oldValue);
        },{deep:false}) //deep配置无效

        // 情况四：监视reactive定义的一个响应式数据某个属性
        watch(()=>persons.age,(newValue,oldValue)=>{
            console.log('persons的age改变了',newValue,oldValue);
        })

        // 情况五：监视reactive定义的一个响应式数据某些属性
        watch([()=>persons.age,()=>persons.name],(newValue,oldValue)=>{
            console.log('persons的age或name改变了',newValue,oldValue);
        })

        // 特殊情况
         watch(()=>persons.job,(newValue,oldValue)=>{
            console.log('persons的job改变了',newValue,oldValue);
        },{deep:true}) //此处监视的是reactive对象中的某个属性，所以deep配置有效
        // 返回一个对象
        return {
            sum,
            msg,
            persons
        }
    },
}
</script>  